<template >
  <div id="basic" style="margin:auto;">
    <!-- <div class="title">儿童膳食测评报告</div> -->
    <!-- <div id="createTime">报告日期：{{ report_time }}</div> -->
    <!-- <el-divider  border-style="dashed"  style="border-color:#2AB28B">
      <div class="subTitle">基本信息</div>
    </el-divider> -->
    <div style="">
      <div style=" width: 100%; background-color:#2ab28b;  text-align: center; margin:auto">
        <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
        <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
        <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">儿童生长发育评估分析报告单
        </div>
      </div>
    </div>

    <!-- <div class="every">
      <div><span>姓名 </span><span>{{contents.username ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>性别 </span><span>{{contents.sex == 1 ? '女':'男' ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>出生日期：</span><span>{{birth ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>监护人姓名：</span><span>{{contents.guardian_name ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>监护人手机号：</span><span>{{contents.guardian_mobile ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>身高：</span><span>{{contents.weigh ?? '[]'}}CM</span></div>
    </div>
    <div class="every">
      <div><span>体重：</span><span>{{contents.height ?? '[]'}}KG</span></div>
    </div>
    <div class="every">
      <div><span>头围：</span><span>{{contents.touwei ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>出生身长：</span><span>{{contents.chushengsg ?? '[]'}}CM</span></div>
    </div>
    <div class="every">
      <div><span>出生体重：</span><span>{{contents.chushengtz ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>腹围：</span><span>{{contents.fuwei ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>血型：</span><span>{{contents.xuexing_value ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>民族：</span><span>{{contents.minzu_value ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>与监护人关系：</span><span>{{contents.guanxi_value ?? '[]'}}</span></div>
    </div>
    <div class="every">
      <div><span>家长受教育程度：</span><span>{{contents.jiaoyu_value ?? '[]'}}</span></div>
    </div>
    <div class="every" style="width: 100%">
      <div><span>出生情况：</span><span>{{contents.birthSituation_value ?? '[]'}}</span></div>
    </div> -->
    <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
            <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童基本信息</div>
          </div>
          <div
        style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px;font-size: 14px;"
        v-if="times == 2">
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            年龄
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ births }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 2px solid #09a578;">
            {{ report_time }}
          </div>
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            BMI</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ BMIs }}
          </div>
        </div>
      </div>
      <div style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px"
        v-if="times == 1">
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 90%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ report_time }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            头围
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.touwei ? contents.touwei + 'CM' : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengsg ? contents.chushengsg + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengtz ? contents.chushengtz + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            腹围
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.fuwei ? contents.fuwei + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.xuexing_value ? contents.xuexing_value : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.minzu_value ? contents.minzu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            与监护人关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guanxi_value ? contents.guanxi_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            家长受教育程度
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.jiaoyu_value ? contents.jiaoyu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.birthSituation_value ? contents.birthSituation_value : '' }}
          </div>
        </div>
      </div>
          <!-- 其他信息 -->
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
            <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              其他信息
            </div>
          </div>
          <div style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578; margin-top: 10px" v-if="times==1">
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                妊娠不良习惯
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.Bad_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                妊娠疾病情况
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.disease_value ?? '[]' }}
              </div>
            </div>
          </div>
          <div style="display: flex;margin-top:20px;border:2px solid #09a578" v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            出生身高/身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; ">
            {{ contents.chushengsg ? contents.chushengsg + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578;  ">
            {{ contents.chushengtz ? contents.chushengtz + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            腹围
          </div>
          <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578;">
            {{ contents.fuwei ? contents.fuwei + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;">
            {{ contents.xuexing_value ? contents.xuexing_value : '' }}
          </div>
        </div>
        <div style="display: flex;border:2px solid #09a578;border-top:none;"  v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; ">
            {{ contents.minzu_value ? contents.minzu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            与监护人关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578;  ">
            {{ contents.guanxi_value ? contents.guanxi_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            家长受教育程度
          </div>
          <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578;">
            {{ contents.jiaoyu_value ? contents.jiaoyu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;">
            {{ contents.birthSituation_value ? contents.birthSituation_value : '' }}
          </div>
        </div>
        <div style="display: flex"  v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10.5%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
            头围
          </div>
          <div
            style="width: 90%;border-bottom: 2px solid #09a578;border-right: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
            {{ contents.touwei ? contents.touwei + 'CM' : '' }}
          </div>
        </div>
        <div style="display: flex"  v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10.5%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
            每日摄水量
          </div>
          <div
            style="width: 90%;border-bottom: 2px solid #09a578;border-right: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
            {{ contents.water ? contents.water + 'ML' : '' }}
          </div>
        </div>
        <div style="display: flex"  v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10.5%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
            儿童疾病情况
          </div>
          <div
            style="width: 90%;border-bottom: 2px solid #09a578;border-right: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
            {{ contents.Childhooddiseases ? contents.Childhooddiseases : '' }}
          </div>
        </div>
        <div style="display: flex"  v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10.5%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
            过敏食物
          </div>
          <div
            style="width: 90%;border-bottom: 2px solid #09a578;border-right: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
            {{ contents.allergy_value ? contents.allergy_value : '' }}
          </div>
        </div>
        <div style="display: flex"  v-if="times==2">
          <div
            style="background-color: rgb(42, 178, 139);width: 10.5%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
            食物不耐受
          </div>
          <div
            style="width: 90%;border-bottom: 2px solid #09a578;border-right: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
            {{ contents.intolerance_value ? contents.intolerance_value : '' }}
          </div>
        </div>
          <!-- 孩子临床表现 -->
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;" v-if="times==1"> 
            <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              孩子临床表现
            </div>
          </div>
          <div style="width: 1070px;  border-top: 2px solid #09a578; border-right: 2px solid #09a578; margin-top: 10px" v-if="times==1">
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                头发
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.hair_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                眼睛
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.eye_value ?? '[]' }} 
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                皮肤
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.skin_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                口腔
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.oralCavity_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                牙齿
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.tooth_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                颈部
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.neck_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                神经病变
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.Neuropathy_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                神经症状
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.symptoms_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                体征
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.sign_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                骨骼
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.bones_value ?? '[]' }}
              </div>
            </div>
          </div>
          <!-- 食物过敏 -->
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;" v-if="times==1">
            <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              食物过敏
            </div>
          </div>
          <div style="width: 1070px; border: 2px solid #09a578; margin-top: 10px" v-if="times==1">
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                过敏食物
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.allergy_value ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                食物不耐饿
              </div>
              <div style="width: 90%;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
                {{ contents.intolerance_value ?? '[]' }}
              </div>
            </div>
          </div>
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;" v-if="times==2">
          <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            儿童常见疾病
          </div>
        </div>
        <div style="width: 1070px;  border-top: 2px solid #09a578; border-right: 2px solid #09a578; margin-top: 10px" v-if="times==2">
          <div style="display: flex">
            <div
              style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
              五官科
            </div>
            <div
              style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
              {{ contents.hair_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
              皮肤科
            </div>
            <div
              style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
              {{ contents.eye_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
              消化系统
            </div>
            <div
              style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
              {{ contents.skin_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
              呼吸系统
            </div>
            <div
              style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
              {{ contents.oralCavity_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
              常见疾病和症状
            </div>
            <div
              style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
              {{ contents.tooth_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
              中医辩证病症
            </div>
            <div
              style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;overflow: hidden;height:42px;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">
              {{ contents.neck_value ?? '[]' }}
            </div>
          </div>
        </div>

          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              主治医师
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor}}</div>
          </div>
          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              检测护士
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor1}}</div>
          </div>
           <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              报告日期
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{report_time}}</div>
          </div>
    <div v-if="code_1 == 'true'"
      style="margin-top: 20px;height:200px;text-align: end;margin-right: 50px;margin-bottom:50px;">
      <img style="width: 200px;height:200px;" :src="'http://' + baseUrl + '/' + codeimg" alt="">
      <div style="margin-top:10px;font-size: 20px;font-weight: bold;">
        扫码关注公众号,获取在线报告
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from "vue-router"
import http, { baseUrl } from "../../utils/http";
import { ElMessage } from "element-plus";
const contents = ref({})
const reportId = ref()
const router = useRouter()
const route = useRoute()
const hospital_name = ref()
const report_time = ref()
const birth = ref()
const times=ref()
const Titlename = ref()
const username = ref()
const codeimg = ref()
const guardian = ref()
const code_1 = ref(false)
const birthStatus = ref()
import PrintJS from 'print-js'
const births=ref()
const id=ref()
const BMIs=ref()
const Doctor=ref()
const Doctor1=ref()
const fetchData = async () => {
  Titlename.value = localStorage.getItem('Title');
  reportId.value = route.params.reportId
  username.value = route.params.username
  guardian.value = route.params.guardian
  id.value = route.params.id
  birthStatus.value = route.params.birth
  codeimg.value = window.localStorage.getItem('ercode')
  http.get('api/archives/viewReportMember?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
    
    if(res.data.data.times){
      let  parsedDate = new Date(res.data.data.times);
      let  targetDateObj = new Date('2024-01-08');
      if (parsedDate < targetDateObj) {
       times.value=1;
      } else if (parsedDate > targetDateObj) {
        times.value=2;
      } 
    }
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    }
    Doctor.value=res.data.data.contents.doctor;
    Doctor1.value=res.data.data.contents.doctor1;
    BMIs.value=res.data.data.bmi;
    report_time.value = res.data.data.times
    birth.value = $getTimes(res.data.data.contents.birth)
    contents.value = res.data.data.contents;
    // contents.births.value = '2077-07-07'
  })



  //获取用户年龄
  http.get("api/archives/evaluating?id=" + id.value ).then((res) => {
      births.value=res.data.data.birth;
  });
  //获取二维码是否显示
  http.get('api/index/getAuth').then((res) => {
    let aray = res.data.data;
    let array = aray.split(',');
    if (array.includes('12')) {
      code_1.value = 'true'
    } else {
      code_1.value = 'false'
    }
  })




  setTimeout(() => {
    print('print-all')
  }, 2000)

}
function $getTimes(params) {
  let date = new Date(params);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  float: right;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}

.shu {
  width: 5px;
  height: 30px;
  background: #2AB28B;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 30px;
  color: #2AB28B;
  /*border-bottom: 1px dashed  red;*/
}

.every {
  height: 35px;
  line-height: 35px;
  min-width: 33%;
  float: left;
  font-weight: bold;
}

#basic .symptom {
  text-align: left;
  line-height: 35px;
  float: left;
}

#basic {
  font-size: 16px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  /*margin: 60px auto 0 auto;*/
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic .symptom .every {
  width: 30%;
  float: left;
}

.symptom_content {
  width: 100%;
  float: left;

}
</style>
